<template>
  <div :style="{ padding: '0 0 32px 32px' }">
    <h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
    <v-chart
      height="254"
      :data="data"
      :forceFit="true"
      :padding="['auto', 'auto', '40', '50']">
      <v-tooltip/>
      <v-axis/>
      <v-bar position="x*y"/>
    </v-chart>
  </div>
</template>

<script>
  export default {
    name: 'Bar',
    props: {
      title: {
        type: String,
        default: ''
      },
      data: {
        type: Array,
        default: () => {
          return []
        }
      },
      scale: {
        type: Array,
        default: () => {
          return [{
            dataKey: 'x',
            min: 2
          }, {
            dataKey: 'y',
            title: '时间',
            min: 1,
            max: 22
          }]
        }
      },
      tooltip: {
        type: Array,
        default: () => {
          return [
            'x*y',
            (x, y) => ({
              name: x,
              value: y
            })
          ]
        }
      }
    },
    data () {
      return {}
    }
  }
</script>
